<template>
   <div class="wrapper">
        <div class="top-nav-wrap">
            <div class="top-nav">
                <ul class="nav-menu">
                    <li class="selt_option" >
                        <p @click="allOrder">全部订单</p>
                        <p>_</p>
                    </li>
                    <li class="selt_option" >
                        <p @click="integralOrder">积分订单</p>
                        <p>_</p>
                    </li>
                    <li class="selt_option" >
                        <p @click="groupBookingOrder">拼团订单</p>
                        <p>_</p>
                    </li>
                </ul>
            </div>
        </div>
        <div class="content-box-wrap">
            <div class="content-box" >
                <div class="order_form" v-for="(order, index) in Orders" :key="index">
                    <div class="top_state_box">
                        <div class="logo_box">
                            <div class="logo">
                                <em></em>
                                <h3>汇方圆</h3>
                            </div>
                            <span class="state">{{order.order_status==0? '外卖':order.order_status==1? '订餐':order.order_status==2? '拼团':order.order_status==3?'预定':order.order_status==4 ?'超市':order.order_status==5?'积分':'未知'}}</span>
                        </div>
                        <i class="active_state">{{order.status==0?'待付款':order.status==1?'骑手到店取货中':order.status==2?'旗手正在派送':order.status==3?'已完成':order.status==4?'已关闭':order.status==0?'无效订单':'正在处理'}}</i>
                    </div>
                    <div class="foods_box" >
                        <div class="foods" v-for="(order_item, index1) in order.order_items" :key="index1">
                            <div class="pic_box">
                                <img :src="order_item.product_pic" alt="">
                            </div>
                            <em class="food_name">
                                {{order_item.product_name}}
                            </em>
                        </div>
                        
                        
                        
                    </div>
                    <div class="datails_wrap">
                        <div class="total_wrap" v-if="order.order_status!=5">
                            <p class="total">
                                <span>共<em>{{order.productLength}}</em>件</span>
                                <em>￥{{order.pay_amount}}</em>
                            </p>
                        </div>
                         <div class="dp-jf" v-if="order.order_status==5">
                            <span class="a11">x1</span>
                            <img src="/static/imgs_s05/s05_logo.png" alt=""><span>300积分</span>
                        </div>
                        <div class="datails" >
                            <span>{{order.order_status==5?'拼团人数':'用餐人数'}}:<em id="num_peo">1</em></span>
                        </div>
                        <div class="btn">
                            <span @click="cartOrder(order)">查看订单</span>
                        </div>
                    </div>
                </div>
                
            </div>
        </div>
    </div>
</template>

<script>

export default {
  data () {
    return {
     Orders:{}
      }
    
  },

  components: {
    
  },

  methods: {
    cartOrder(order){
             wx.navigateTo({url:"/pages/s04_secoud/main?order_sn="+order.order_items[0].order_sn});
    },
    allOrder(){
        wx.request({
      url: 'http://localhost:2221/order/orderList?member_id=1&shop_id=1', //开发者服务器接口地址",
     // data: 'data', //请求的参数",
      method: 'GET',
      dataType: 'json', //如果设为json，会尝试对返回的数据做一次 JSON.parse
      success: res => {
          
          //s02_no-order 订单为空界面
          if(res.data==null||res.data==""){
              wx.navigateTo({url:"/pages/s02_no-order/main"})
          }else{
              this.Orders=res.data
          }
          
      },
      fail: () => {
         
      },
      //complete: () => {}
    });


    }, 
    integralOrder(){
    wx.request({
      url: 'http://localhost:2221/order/orderList?member_id=1&shop_id=1&order_status=5', //开发者服务器接口地址",
     // data: 'data', //请求的参数",
      method: 'GET',
      dataType: 'json', //如果设为json，会尝试对返回的数据做一次 JSON.parse
      success: res => {
          
          //s02_no-order 订单为空界面
          if(res.data==null||res.data==""){
              wx.navigateTo({url:"/pages/s02_no-order/main"})
          }else{
              this.Orders=res.data
          }
          
      },
      fail: () => {
         
      },
      //complete: () => {}
    });
    },
    groupBookingOrder(){
         wx.request({
      url: 'http://localhost:2221/order/orderList?member_id=1&shop_id=1&order_status=2', //开发者服务器接口地址",
     // data: 'data', //请求的参数",
      method: 'GET',
      dataType: 'json', //如果设为json，会尝试对返回的数据做一次 JSON.parse
      success: res => {
          
          //s02_no-order 订单为空界面
          if(res.data==null||res.data==""){
              wx.navigateTo({url:"/pages/s02_no-order/main"})
          }else{
              this.Orders=res.data
          }
          
      },
      fail: () => {
         
      },
      //complete: () => {}
    });
    }
    
  },

  created () {
    // let app = getApp()
   wx.request({
      url: 'http://localhost:2221/order/orderList?member_id=1&shop_id=1', //开发者服务器接口地址",
     // data: 'data', //请求的参数",
      method: 'GET',
      dataType: 'json', //如果设为json，会尝试对返回的数据做一次 JSON.parse
      success: res => {
          
          //s02_no-order 订单为空界面
          if(res.data==null||res.data==""){
              wx.navigateTo({url:"/pages/s02_no-order/main"})
          }else{
              this.Orders=res.data
          }
          
      },
      fail: () => {
         
      },
      //complete: () => {}
    });

  }
}
</script>

<style scoped>
em{
    display:inline-block; 
}
        .wrapper {
            width: 100%;
            height: 100%;
            background-color: #eee;
        }

        .top-nav-wrap {
            width: 100%;
            height: 35px;
        }

        .top-nav {
            width: 375px;
            height: 35px;
            margin: 0 auto;
            background-color: #fff;
            border-bottom-left-radius: 3px;
            border-bottom-right-radius: 3px;
        }

        .nav-menu {
            margin-left: 23px;
        }

        .selt_option {
            float: left;
            margin: 0 30px;
            text-align: center;
            position: relative;
            font-size: 13px;
        }

        .selt_option p:nth-child(1) {
            line-height: 35px;
            color: #676767;
        }

        .selt_option p:nth-child(2) {
            position: absolute;
            bottom: 0px;
            left: 20px;
            color: #fff;
            font-size: 20px;
        }

        .selt_option p:nth-child(2):hover {
            color: #32B16C;
        }

        .content-box-wrap {
            width: 100%
        }

        .content-box {
            width: 375px;
            margin: 0 auto;
        }

        .order_form {
            width: 353px;
            height: 229px;
            background-color: #fff;
            margin: 10px 11px 11px;
            border-radius: 3px;
            position: relative;
        }

        .top_state_box {
            width: 353px;
            height: 50px;
            line-height: 50px;
            /* box-shadow: rgba(12,12,12,0.2) 0px 1px 4px 0px ,rgba(0,0,0,0.15) 0px 0px 0px 1px; */
        }

        .logo_box {
            float: left;
            height: 50px;
            width: 150px;
            /* box-shadow: rgba(12,12,12,0.2) 0px 1px 4px 0px ,rgba(0,0,0,0.15) 0px 0px 0px 1px; */
        }

        .logo {
            float: left;
        }

        .logo h3 {
            float: left;
            line-height: 50px;
            font-size: 13px;
            font-family: "Source Han Sans CN";
            font-weight: 500;
            color: rgba(48, 48, 48, 1);
            margin: 0px 6px;
        }

        .logo em {
            width: 30px;
            height: 30px;
            background-color: #eee;
            float: left;
            margin-top: 14px;
            margin-left: 9px;
            border-radius: 3px;
        }

        .top_state_box i {
            float: right;
            color: #32B16C;
            font-size: 13px;
            margin-right: 19px;
        }

        .logo_box .state {
            background-color: #F19149;
            padding: 2px 6px;
            color: #fff;
            border-radius: 3px;
            font-size: 12px
        }

        .foods_box {
            width: 353px;
            height: 100px;
            margin-top: 5px;
            /* box-shadow: rgba(12,12,12,0.2) 0px 1px 4px 0px ,rgba(0,0,0,0.15) 0px 0px 0px 1px; */
        }

        .foods {
            width: 72px;
            height: 100px;
            float: left;
            margin-right: 14px;
            /* box-shadow: rgba(12,12,12,0.2) 0px 1px 4px 0px ,rgba(0,0,0,0.15) 0px 0px 0px 1px; */
        }

        .foods:nth-child(1) {
            margin-left: 9px;
        }

        .foods .pic_box,
        .pic_box img {
            width: 72px;
            height: 72px;
        }

        .food_name {
            font-size: 11px;
            color: #646464;
            margin-top: 9px;
            text-indent: 1px;
            float: left;
        }

        .total_wrap {
            /* border: 1px solid #000; */
            /* box-shadow: rgba(12,12,12,0.2) 0px 1px 4px 0px ,rgba(0,0,0,0.15) 0px 0px 0px 1px; */
            width: 353px;
            height: 30px;
        }

        .total {
            float: right;
            margin-right: 17px;
            margin-top: 10px;
            /* border: 1px solid #000; */
            font-size: 12px
        }

        .total>span {
            color: #606060;
            margin-right: 9px;
        }

        .datails_wrap {
            width: 353px;
            height: 74px;
            /* border: 1px solid #000 ; */
            /* box-shadow: rgba(12,12,12,0.2) 0px 1px 4px 0px ,rgba(0,0,0,0.15) 0px 0px 0px 1px; */
        }

        .datails {
            float: left;
            /* margin-left: 9px; */
            font-size: 11px;
            color: #606060;
            /* border: 1px solid #000; */
            padding: 8px 10px 10px 9px;
        }

        .btn {
            float: right;
            margin-right: 17px;
            margin-bottom: 14px;
            margin: 1px 17px 14px 1px;
        }

        .btn span {
            padding: 5px 15px;
            background-color: #fff;
            border: 1px solid #D7D7D7;
            border-radius: 3px;
            font-size: 13px;
        }
         .dp-jf span {
            color: #32B16C;
        }
    </style>
